<template>
  <div class="app-container" v-loading="isLoading">      
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px">
         <div class="caption-title">修改密码</div>
        <el-row>
            <el-col :span="12">
                <el-form-item prop="oldpwd" label="旧密码：">
                      <el-input
                      placeholder="请输入旧密码"
                      v-model="temp.oldpwd">
                  </el-input>
                </el-form-item>
            </el-col>
        </el-row>       
        <el-row>
            <el-col :span="12">
                <el-form-item prop="pwd1" label="新密码：">
                      <el-input
                      placeholder="请输入新密码"
                      v-model="temp.pwd1">
                  </el-input>
                </el-form-item>
            </el-col>
        </el-row>   
         <el-row>
            <el-col :span="12">
                <el-form-item prop="pwd2" label="确认新密码：">
                      <el-input
                      placeholder="请确认新密码"
                      v-model="temp.pwd2">
                  </el-input>
                </el-form-item>
            </el-col>
        </el-row>       
         
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认修改</el-button>
            <el-button type="default" @click="cancelInput">取消</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>

<script>
import { fetchOne, save } from "../../api/aboutus";
export default {
  data() {
    return {
      temp: {
        oldpwd: "",
        pwd1: "",
        pwd2: ""
      },
      rules: {
        oldpwd: [
          { required: true, message: "旧密码不能为空", trigger: "change" }
        ],
        pwd1: [
          { required: true, message: "新密码不能为空", trigger: "change" }
        ],
        pwd2: [
          { required: true, message: "确认密码不能为空", trigger: "change" }
        ]
      },
      pickerOptions1: {
        //   disabledDate(time) {
        //     return time.getTime() > Date.now();
        //   },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  created() {},
  methods: {
    cancelInput() {
      this.temp = {oldpwd: "",
        pwd1: "",
        pwd2: ""};
    },
    onSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
        }
      });
    }
  }
};
</script>

<style>
.caption-title {
  font-size: 16px;
  padding-bottom: 15px;
  font-weight: bold;
}
</style>
